<template>
  <div class="footer">
    <div class="footer-tit">
      <div class="foo-left">
        <h5>关于我们</h5>
        <div class="footer-tit-one">
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
        </div>
        <div class="footer-tit-two">
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
        </div>
      </div>
      <div class="foo-cen">
        <h5>关于我们</h5>
        <div class="footer-tit-one">
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
        </div>
        <div class="footer-tit-two">
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
        </div>
      </div>
      <div class="foo-right">
        <h5>关于我们</h5>
        <div class="footer-tit-one">
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
        </div>
        <div class="footer-tit-two">
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
          <a href="#"><p>公司介绍</p></a>
        </div>
      </div>
      
    </div>
    <div class="footer-border"></div>
    <div class="footer-text">
      <div class="foo-tet">
        <a href="#"><span>营业执照</span></a>
        <a href="#"><span>京网文</span></a>
        <a href="#"><span>XXXXXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXXX</span></a>
      </div>
      <div>
        <a href="#"><span>XXXXXXXXXXXXXXXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXXXXXXXXXXXX</span></a>
      </div>
      <div>
        <a href="#"><span>XXXXXXXXXXXXXXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXX</span></a>
        <a href="#"><span>XXXXXXXXXXX</span></a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'FooterItem'
  }
</script>

<style scoped>
  .footer{
    width: 90%;
    height: 300px;
    margin: 0 auto;
    margin-top: 80px;
    /* background-color: darksalmon; */
  }
  .foo-left, .foo-cen, .foo-right{
    width: 500px;
    height: 150px;
    padding-top: 23px;
    /* background: blue; */
  }
  .footer-tit{
    display: flex;
  }
  .foo-cen{
    margin: 0 10px;
  }
  .footer-tit-one, .footer-tit-two{
    display: flex;
    
  }
  .footer-tit-one a{
    margin-right: 20px;
  }
  .footer-tit-two a{
    margin-right: 20px;
  }

  .footer-border{
    width: 98%;
    margin: 0 auto;
    border: 1px solid rgba(100, 100, 100, .2);
  }

  .footer-text{
    /* background-color: chartreuse; */
    margin-top: 20px;
  }
  .footer-text div{
    width: 100%;
    height: 30px;
    text-align: center;
  }
  .footer-text a{
    padding: 15px 6px;
    
  }
  .footer-text span{
    color: #2c2c2c;
  }
</style>